<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1,
			.div2 {
				width: 1224px;
				border: 1px solid #FFFFFF;
				
				/* 水平居中 */
				margin: 0 auto 480px;
			}

			.left-div {
				width: 20%;
				height: 460px;
				background: #C9C9C9;
			}

			.right-div {
				width: 80%;
				height: 460px;
				background: #0000FF;
				background: url(4.png) no-repeat;
			}

			.div1 div,
			.div2 div {
				float: left;
			}

			.div1:after,
			.div1:before .div2:after,
			.div2:before {
				content: " ";
				display: table;
			}

			.div1:after .div2:after {
				clear: both;
			}

			.div2 div:first-child {
				width: 20%;
				height: 140px;
				background: #666;
			}

			.div2 div:nth-child(2){
				width: 25.01%;
				height: 140px;
				background: url(1.png) no-repeat;
				background-size: cover;
			}
			.div2 div:nth-child(3){
				width: 25.01%;
				height: 140px;
				background: url(2.png) no-repeat;
				background-size: cover;
			}
			.div2 div:nth-child(4) {
				width: 25.01%;
				height: 140px;
				background: url(3.png) no-repeat;
				background-size: cover;
			}

			.div2 div {
				margin-right: 15.2px;
			}

			.div2 div:last-child` {
				margin-right: 0;
			}

			.div2 table {
				width: 100%;
				height: 100%;
			}

			table,
			td {
				border: 1px solid #888;
				border-collapse: collapse;
				text-align: center;
				color: #fff;
			}
			.a{
				color: white;
				width: 100%;
				padding: 10px;
				background-color: black;
			}
			a{
				background-position: center;
			}
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 100%;
				background-color: blueviolet;
			}
			
			li {
				display: block;
				color: #FFFFFF;
				padding: 8px 16px;
				text-decoration: none;
			}
			
			/* 鼠标移动到选项上修改背景颜色 */
			li a:hover {
				background-color: #FFD700;
				color: white;
			}
			/* .www {
				width: 100%;
			} */
		</style>

	</head>
	<body>
		<div class="div1">
			<div class="left-div">
				<ul class="www">
					<li>手机 电话卡</li>
					<li>电视 盒子</li>
					<li>笔记本 平板</li>
					<li>家电 插线板</li>
					<li>出行 穿越</li>
					<li>智能 路由器</li>
					<li>电源 配件</li>
					<li>健康 儿童</li>
					<li>耳机 音响</li>
					<li>生活 箱包</li>
				</ul>
			</div>
			<div class="right-div"></div>
		</div>
		<div class="div2">
			<div>
				<table>
					<tr>
						<td>小米秒杀</td>
						<td>企业团购</td>
						<td>F码通道</td>
					</tr>
					<tr>
						<td>米粉卡</td>
						<td>以旧换新</td>
						<td>花费充值</td>
					</tr>
				</table>
			</div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<ul class="a">
		<a rel="nofollow">小米商城</a>
		<span class="sep">|</span>
		<a rel="nofollow">MIUI</a>
		<span class="sep">|</span>
		<a rel="nofollow">IoT</a>
		<span class="sep">|</span>
		<a rel="nofollow">云服务</a>
		<span class="sep">|</span>
		<a rel="nofollow">金融</a>
		<span class="sep">|</span>
		<a rel="nofollow">有品</a>
		<span class="sep">|</span>
		<a rel="nofollow">小爱开放平台</a>
		<span class="sep">|</span>
		<a rel="nofollow">企业团购</a>
		<span class="sep">|</span>
		<a rel="nofollow">资质证照</a>
		<span class="sep">|</span>
		<a rel="nofollow">协议规则</a>
		<span class="sep">|</span>
		<a rel="nofollow">下载app</a>
		<span class="sep">|</span>
		<a rel="nofollow">SelectLocation</a>
		<span class="sep">|</span>
		</ul>
	</body>
<ml>
